<template>
  <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-md">
    <!-- 标题区域 - 使用校园风格的渐变 -->
    <div class="bg-gradient-to-r from-[#62dbb7] to-[#40aad4] p-4 text-white relative overflow-hidden">
      <!-- 装饰性背景图案 -->
      <div class="absolute inset-0 opacity-10">
        <svg class="w-full h-full" viewBox="0 0 100 100" fill="none">
          <circle cx="20" cy="20" r="15" fill="currentColor"/>
          <circle cx="80" cy="30" r="8" fill="currentColor"/>
          <circle cx="70" cy="70" r="12" fill="currentColor"/>
          <circle cx="30" cy="80" r="6" fill="currentColor"/>
        </svg>
      </div>
      
      <div class="relative flex items-center justify-between">
        <div class="flex items-center">
          <div class="bg-white/20 backdrop-blur-sm rounded-full p-2 mr-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
          </div>
          <div>
            <h2 class="text-lg font-bold">推荐好友</h2>
            <p class="text-sm opacity-90">发现志同道合的同学</p>
          </div>
        </div>
        
        <!-- 分页控制器 -->
        <div class="flex items-center space-x-2">
          <button @click="prevPage" :disabled="currentPage === 1" 
                  class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center transition-all duration-200 hover:bg-white/30 disabled:opacity-50 disabled:cursor-not-allowed">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <span class="text-sm font-medium px-2 bg-white/20 rounded-full">{{ currentPage }}/{{ totalPages }}</span>
          <button @click="nextPage" :disabled="currentPage === totalPages"
                  class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center transition-all duration-200 hover:bg-white/30 disabled:opacity-50 disabled:cursor-not-allowed">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 用户列表 -->
    <div class="p-4 space-y-3 bg-[#F8F9FA]">
      <div v-for="user in paginatedUsers" :key="user.id" 
           class="group relative bg-white rounded-xl p-4 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] cursor-pointer border border-gray-50"
           style="box-shadow: 0 4px 12px rgba(0,0,0,0.08);"
           @click="handleUserClick(user.id)">
        
        <!-- 用户信息 -->
        <div class="flex items-start space-x-3">
          <!-- 头像区域 -->
          <div class="relative flex-shrink-0">
            <div class="w-12 h-12 rounded-full bg-gradient-to-br p-0.5">
              <img :src="user.avatar" :alt="user.name" 
                   class="w-full h-full rounded-full object-cover bg-white">
            </div>
            
            <!-- 性别标识 -->
            <div v-if="user.gender" 
                 class="gender-badge absolute -bottom-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center text-white text-xs shadow-md border-2 border-white"
                 :class="user.gender === 'male' ? 'bg-blue-500' : 'bg-pink-400'">
              {{ user.gender === 'male' ? '♂' : '♀' }}
            </div>
          </div>

          <!-- 用户详情 -->
          <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center mb-1">
                <h3 class="text-lg font-bold text-gray-800 truncate mr-2">{{ user.name }}</h3>
              </div>
              <button @click.stop="handleFollowClick(user.id)"
                      :class="[
                        'px-4 py-2 text-sm font-medium rounded-full transition-all duration-200 transform hover:scale-105 shadow-sm hover:shadow-md flex items-center space-x-1',
                        user.isFollowing 
                          ? 'bg-gray-300 text-gray-500 cursor-default hover:scale-100 hover:shadow-sm' 
                          : 'bg-gradient-to-r from-emerald-400 to-cyan-400 text-white hover:from-emerald-500 hover:to-cyan-500'
                      ]"
              >
                <svg v-if="user.isFollowing" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
                <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                <span>{{ user.isFollowing ? '已关注' : '关注' }}</span>
              </button>
            </div>

            <!-- 学校信息 -->
            <div class="flex items-center text-xs text-gray-600 mb-1.5">
              <svg class="w-3 h-3 mr-1 text-[#62dbb7]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
              </svg>
              <span class="truncate">{{ user.school }}</span>
            </div>

            <!-- 专业班级 -->
            <div class="flex items-center text-xs text-gray-500 mb-2">
              <svg class="w-3 h-3 mr-1 text-[#8b63e9]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
              </svg>
              <span class="truncate">{{ user.major }} · {{ user.class }}</span>
            </div>

            <!-- 兴趣标签 -->
            <div v-if="user.tags && user.tags.length > 0" class="flex flex-wrap gap-1 mb-2">
              <span v-for="(tag, index) in user.tags.slice(0, 2)" :key="index"
                    class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
                    style="background-color: #E3F2FD; color: #1976D2;">
                # {{ tag }}
              </span>
              <span v-if="user.tags.length > 2" class="text-xs text-gray-400">
                +{{ user.tags.length - 2 }}
              </span>
            </div>

            <!-- IP属地 -->
            <div class="flex items-center justify-between text-xs text-gray-400">
              <div class="flex items-center">
                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                <span>IP属地: {{ user.ipCity }}</span>
              </div>
              <!-- 推荐理由 -->
              <span class="text-[#fcc14a] font-medium">{{ getRecommendReason(user) }}</span>
            </div>
          </div>
        </div>

        <!-- 悬停效果装饰 -->
        <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-[#62dbb7]/5 to-[#40aad4]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
      </div>

      <!-- 空状态 -->
      <div v-if="paginatedUsers.length === 0" class="text-center py-8">
        <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#62dbb7] to-[#40aad4] rounded-full flex items-center justify-center">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
        </div>
        <p class="text-gray-500 font-medium">暂无推荐用户</p>
        <p class="text-sm text-gray-400 mt-1">完善个人信息获得更多推荐</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SuggestUserList",
  props: {
    externalUsers: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 5,
      defaultUsers: [
        {
          id: 1,
          name: "张小明",
          avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100",
          school: "北京大学",
          major: "计算机科学与技术",
          class: "计科2101班",
          gender: "男",
          ipCity: "北京",
          bio: "热爱编程，喜欢探索新技术，目标成为全栈工程师",
          tags: ["编程", "技术", "读书"],
          isFollowing: false,
          recommendReason: "同专业"
        },
        {
          id: 2,
          name: "李美丽",
          avatar: "https://images.unsplash.com/photo-1494790108755-2616c9c0e8d3?w=100",
          school: "清华大学",
          major: "美术学",
          class: "美术2201班",
          gender: "女",
          ipCity: "上海",
          bio: "艺术创作者，专注于数字艺术和插画设计",
          tags: ["艺术", "设计"],
          isFollowing: false,
          recommendReason: "共同好友"
        },
        {
          id: 3,
          name: "王大力",
          avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100",
          school: "复旦大学",
          major: "新闻传播学",
          class: "新闻2002班",
          gender: "男",
          ipCity: "广州",
          bio: "新闻爱好者，关注社会热点，立志成为优秀记者",
          tags: ["新闻", "写作"],
          isFollowing: false,
          recommendReason: "同城"
        },
        {
          id: 4,
          name: "赵小雅",
          avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100",
          school: "浙江大学",
          major: "金融学",
          class: "金融2304班",
          gender: "女",
          ipCity: "杭州",
          bio: "金融分析师，对投资理财有独到见解",
          tags: ["金融", "投资"],
          isFollowing: false,
          recommendReason: "兴趣相似"
        },
        {
          id: 5,
          name: "钱志强",
          avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100",
          school: "南京大学",
          major: "软件工程",
          class: "软工研一",
          gender: "男",
          ipCity: "南京",
          bio: "软件开发工程师，专注于前端技术和用户体验",
          tags: ["前端", "React"],
          isFollowing: false,
          recommendReason: "同专业"
        },
        {
          id: 6,
          name: "孙小花",
          avatar: "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?w=100",
          school: "华中科技大学",
          major: "心理学",
          class: "心理2203班",
          gender: "女",
          ipCity: "武汉",
          bio: "心理咨询师，帮助他人解决心理困扰",
          tags: ["心理学", "咨询"],
          isFollowing: false,
          recommendReason: "新用户"
        }
      ]
    };
  },
  computed: {
    users() {
      return this.externalUsers.length > 0 ? this.externalUsers : this.defaultUsers;
    },
    totalPages() {
      if (!this.users || this.users.length === 0) return 1;
      return Math.ceil(this.users.length / this.itemsPerPage);
    },
    paginatedUsers() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.users.slice(start, end);
    }
  },
  methods: {
    handleUserClick(userId) {
      this.$emit('user-click', userId);
      console.log('用户点击:', userId);
    },
    handleFollowClick(userId) {
      const user = this.users.find(u => u.id === userId);
      if (user) {
        user.isFollowing = !user.isFollowing;
      }
      
      this.$emit('follow', userId);
      console.log('关注用户:', userId);
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    getRecommendReason(user) {
      return user.recommendReason || '推荐';
    }
  }
};
</script>

<style scoped>
/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: #62dbb7;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #40aad4;
}

/* 卡片悬停动画 */
.group:hover {
  animation: cardFloat 0.3s ease-out;
}

@keyframes cardFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1.02); }
}

.follower-item {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 减少间距 */
  padding: 0.5rem 1rem; /* 减少内边距 */
  border-radius: 0.75rem; /* 12px */
  background-color: rgba(249, 250, 251, 0.7);
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.3s ease;
  cursor: pointer;
}

.follower-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  background-color: white;
  border-color: transparent;
}

.follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
  min-width: 90px;
}

.follow-btn.not-following {
  background-color: #0ab446; /* red-500 */
  color: white;
}

.follow-btn.not-following:hover {
  background-color: #4fc812; /* red-600 */
  transform: scale(1.05);
}

.follow-btn.following {
  background-color: #e5e7eb; /* gray-200 */
  color: #4b5563; /* gray-600 */
}

.follow-btn.following:hover {
  background-color: #d1d5db; /* gray-300 */
}
</style>